<template>
	<view class="content ss-flex-col ss-m-t-20 ss-m-b-92">
		<view class="content-txt">猜你喜欢</view>
		<scroll-view class="scroll ss-m-t-30" scroll-x="true">
			<template v-for="(item,index) in data" :key="index">
				<image :src="sheep.$url.cdn(item.img)" class="scroll-item" @click="itemClick(index)"></image>
			</template>
		</scroll-view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep'

	import {
		ref,
		reactive,
		computed,
		nextTick
	} from 'vue';

	const props = defineProps({
		data: {
			type: Array,
			default: [],
		},
		skip:{
			type: Boolean,
			default: false,
		}
	})

	function itemClick(index) {
		if (props.skip) {
			sheep.$router.go('/pages/playlet/details', {
				id: props.data[index].id,
				jump: true,
			}, {
				redirect: true
			});
		} else {
			sheep.$router.go('/pages/playlet/details', {
				id: props.data[index].id,
				jump: true,
			});
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.content {
		padding: 0 32rpx;

		.content-txt {
			width: 128rpx;
			height: 46rpx;
			font-family: Source Han Sans;
			font-size: 32rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #FFFFFF;
		}
	}



	.scroll {
		white-space: nowrap;
		width: 100%;
		display: flex;

		.scroll-item {

			display: inline-block;
			width: 210rpx;
			height: 348rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 10rpx;
		}


	}

	.scroll-item:not(:first-of-type) {
		margin-left: 28rpx;
	}
</style>